.dl-display {
    margin: 20px auto;
    width: 98%;
    border: 1px solid #ebebeb;
    border-radius: 5px;
}

.component-display {
    width: 100%;
    border-bottom: 1px solid #ebebeb;
}

.dl-display {}

.code-display {
    height: 0px;
    overflow: hidden;
    width: 100%;
    transition: all 0.2s linear;
    background-color: #fafafa;
    border-bottom: 1px solid #ebebeb;
}

.slide_button {
    text-align: center;
    transition: all 0.3s linear;
    width: 100%;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    position: relative;
}

.slide_button::after {
    position: absolute;
    display: inline-block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: " ";
    z-index: 1;
}

.slide_button:hover {
    background-color: hsla(168, 20%, 95%, 0.568);
}


/* 代码显示按钮 */

.show-code-button {
    position: absolute;
    transform: translateX(0px);
    color: grey;
}

.icon-btn {
    transition: all .3s cubic-bezier(0.4, 0.5, 0.4, 0.8);
    position: absolute;
    transform: translateX(0px);
}

.icon-btn>img {
    height: 20px;
    width: 20px;
    vertical-align: middle;
}


/* 插槽传入时的类名*/

.slot-component_container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}


/* 可以设置不同的进入和离开动画 */


/* 设置持续时间和动画函数 */

.slide-fade-enter-active {
    transition: all .3s cubic-bezier(0.4, 0.5, 0.4, 0.8);
}

.slide-fade-leave-active {
    transition: all .3s cubic-bezier(0.4, 0.5, 0.4, 0.8);
}

.slide-fade-enter,
.slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */

{
    transform: translateX(30px);
    opacity: 0;
}

.icon-transition {
    transform: translateX(-30px) !important;
}